<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位小技巧</title>
    <style>
        .left,.right {
            width: 60px;
            height: 200px;
            position: fixed;/*固定定位的参照物是html*/
            top: 300px;
        }
        .left {
            background-color: #f00;
            left: 20px;
        }
        .right {
            background-color: #00f;
            right: 20px;
        }
        .top {
            background-color: lightgreen;
            height: 120px;
            color: green;
            font-size: 30px;
            position: fixed;
            top: 0;
            width: 100%;
        }
        /*为了防止顶部条遮盖最上面的内容,可以给内容块设置一个上外间距向下移动*/
        .main {
            margin-top: 130px;
        }
    </style>
</head>
<body>
      <div class="top">顶部的广告条</div>
      <div class="left">左边的广告条</div>
      <div class="right">右边的广告条</div>
      <div class="main">
          <!-- lorem*70 Tab补全 -->
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur consectetur ipsum temporibus? At
              culpa dignissimos, excepturi fugiat iusto nobis repudiandae saepe sequi sint vel? Blanditiis cum hic illum
              quam temporibus!
          </div>
          <div>Accusantium culpa, impedit laborum quasi reiciendis veritatis. Atque cupiditate distinctio, ea esse
              expedita fugit itaque laudantium libero molestias nam odio odit, omnis qui quibusdam quod soluta, tenetur
              voluptate voluptatem voluptatum?
          </div>
          <div>Architecto cum ea harum impedit inventore iste libero minus modi necessitatibus odit, omnis pariatur
              quisquam rem rerum ut. Asperiores atque, hic minima nostrum placeat quisquam quod repellendus sed unde
              veniam.
          </div>
          <div>Accusantium, alias, consequuntur corporis cumque eos est illo illum iste maiores minima nam nobis numquam
              officiis pariatur placeat quae quam qui repudiandae sint, soluta sunt tempora veritatis voluptas
              voluptates voluptatum.
          </div>
          <div>A aperiam consequatur eveniet id labore laborum, sed. Aliquam aliquid blanditiis commodi cupiditate
              debitis delectus eaque eius est eveniet excepturi inventore libero magnam, molestiae nisi, saepe sed, ut?
              Exercitationem, odit!
          </div>
          <div>Cum delectus dolore dolores, est exercitationem, fugit in incidunt iste iure laboriosam modi neque nobis
              non odit omnis quia quidem quis reiciendis repellendus sed sunt totam vero. Delectus, explicabo, quasi.
          </div>
          <div>Ad alias ducimus molestiae quasi totam ut voluptates. Ducimus, facilis tempore. Fugit nemo quibusdam quis
              sapiente! Dolores impedit, ipsam libero nam odio quam reprehenderit sapiente sit tempora tenetur! At,
              rerum.
          </div>
          <div>Ea eius iure minus nihil, nisi placeat quasi quisquam tempore temporibus! Accusamus adipisci blanditiis
              cupiditate distinctio id incidunt labore libero nemo nisi, nobis numquam odit porro quaerat qui tempora
              temporibus!
          </div>
          <div>At atque deserunt dolorem facere hic impedit libero maxime nemo officia reiciendis, soluta unde? Dolore
              enim exercitationem ipsa numquam omnis sed velit. Assumenda at dolorem eius fuga nisi quasi qui.
          </div>
          <div>Accusamus aut corporis distinctio doloribus illo iusto quibusdam suscipit ut vel voluptate? Aliquam at
              autem cumque cupiditate excepturi ipsa nam sint, velit veniam. Cumque dicta, dolore iste quo reiciendis
              sit?
          </div>
          <div>Ad esse excepturi ipsa mollitia odit quis ratione, reprehenderit sequi voluptas voluptate! Aliquid animi
              aut dolor eum facere nihil officiis. Autem doloribus esse hic ipsa odio odit reiciendis soluta voluptate!
          </div>
          <div>Distinctio omnis ut voluptatibus. A alias beatae consequuntur cumque dignissimos dolore dolorem dolorum
              error, excepturi illum impedit iste laudantium obcaecati perferendis porro, quasi quidem rem reprehenderit
              suscipit voluptatibus! Rerum, voluptate.
          </div>
          <div>Ab, cum cumque debitis deserunt dolorum earum eum facere inventore molestias nobis provident quam quas
              sit. Ad asperiores aut beatae cupiditate, laudantium libero omnis provident, quam quasi quis,
              reprehenderit saepe?
          </div>
          <div>Consequuntur fuga impedit iure nulla odit quod quos, repellat totam. Ab, deserunt dolorum eaque hic
              illum, ipsa itaque molestiae molestias natus nobis odit quod rerum sapiente similique sit tempora unde!
          </div>
          <div>Dolor dolorum enim excepturi maxime minima, praesentium repudiandae rerum vero. Accusamus alias aperiam
              beatae dolore explicabo laboriosam possimus praesentium quidem tenetur veniam. Ad blanditiis distinctio
              dolorem, eius eveniet odio soluta?
          </div>
          <div>Aspernatur eius ex expedita in totam. Aut consectetur dolorum error eum facere id illo ipsam maxime minus
              molestiae necessitatibus nulla odit optio, quibusdam, rem repellendus sequi totam veritatis. Commodi,
              ducimus.
          </div>
          <div>Accusantium aliquid aut commodi consequatur deserunt dolor eligendi ex itaque maiores nostrum, officia
              perspiciatis quam quibusdam ratione, repudiandae sint sit tenetur, vel velit voluptates? Eaque modi nobis
              non quia sint?
          </div>
          <div>Ab debitis distinctio dolorem dolores doloribus eaque earum enim esse expedita hic incidunt maxime minima
              modi mollitia porro quia, quidem tempora temporibus totam voluptatem! Harum nesciunt non officiis possimus
              vitae.
          </div>
          <div>A adipisci alias aliquam asperiores aut autem consequuntur cum delectus dolore earum enim, excepturi
              exercitationem explicabo ipsam labore magnam maiores, minus mollitia nam omnis perspiciatis, quia rerum
              tempora totam voluptatum?
          </div>
          <div>Ab accusantium ad at blanditiis debitis dolor exercitationem facilis id in, incidunt ipsam nam numquam
              officia officiis perspiciatis porro possimus praesentium provident quas quidem quis repellendus rerum
              saepe vitae voluptatum.
          </div>
          <div>Amet aut id non! Aut corporis dolor dolorem ipsum labore laboriosam magni numquam obcaecati optio? Ab
              cumque dignissimos dolore eos maxime odio quae? Distinctio eligendi expedita harum sed ullam. Explicabo!
          </div>
          <div>Ad fugiat ipsa itaque, nemo perferendis qui quisquam reiciendis sed veniam. Adipisci assumenda doloremque
              ea labore, minus obcaecati odit possimus quae quis reiciendis soluta suscipit tempora, voluptatem
              voluptates voluptatibus. Ea!
          </div>
          <div>Ab accusamus, amet atque blanditiis deserunt dolorem doloremque eius eligendi error excepturi
              exercitationem expedita fuga fugiat illum itaque, iusto molestiae natus optio placeat praesentium
              provident quibusdam rerum tempore voluptate, voluptatem.
          </div>
          <div>Ad adipisci amet, asperiores autem dicta dignissimos doloribus, enim esse eum expedita iste, itaque iusto
              libero nam nemo nostrum numquam officia placeat quaerat quam quasi quia repellat temporibus vitae
              voluptatum.
          </div>
          <div>A alias deserunt distinctio hic id placeat, velit vero. Alias architecto at autem illum incidunt ipsa,
              nihil officiis possimus quis tempora. Consequuntur ipsam nihil, odit quo reiciendis sequi ut veritatis.
          </div>
          <div>Asperiores aspernatur at debitis distinctio earum esse incidunt laboriosam minima necessitatibus nihil
              odit quos reiciendis saepe, sit tempora vitae voluptate. Ab culpa earum eligendi eum exercitationem
              laboriosam, qui ratione tenetur.
          </div>
          <div>A culpa cupiditate delectus dolorem doloremque eum laborum nihil, rerum vero! Asperiores expedita quod
              ratione. Alias commodi exercitationem fuga impedit incidunt ipsum, nihil, nostrum numquam obcaecati
              quaerat tempora tempore ullam.
          </div>
          <div>Fuga laboriosam necessitatibus quasi suscipit totam. Animi mollitia, nulla quas quidem recusandae
              temporibus. Ad aspernatur beatae commodi consequuntur error, et facere fugiat impedit iste iusto neque
              nesciunt quaerat sit suscipit.
          </div>
          <div>Adipisci aliquid, amet animi asperiores deleniti deserunt dolorem eaque earum eveniet, facere facilis
              harum iste itaque labore laudantium magni nesciunt nobis non quam sit sunt totam, unde velit veritatis
              voluptatem.
          </div>
          <div>Ab accusamus, ad aspernatur commodi consequatur corporis culpa deleniti dicta doloribus ea earum
              exercitationem facere ipsa iste maxime minima perspiciatis quisquam quos sint suscipit tempora velit
              voluptate. Adipisci, aliquam dicta?
          </div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias consequuntur corporis cumque ducimus et
              excepturi exercitationem expedita, magnam nemo nisi nostrum quae, quibusdam quidem quos repellat sapiente
              similique sunt, velit.
          </div>
          <div>A aspernatur blanditiis consectetur cumque nemo obcaecati temporibus unde voluptates? Alias eum fugit
              nisi. Eius facere facilis magni minus molestiae neque, nisi, nobis optio repellendus saepe totam veniam
              vero voluptatum.
          </div>
          <div>Ab, cum dolores, eaque earum in magni nemo nisi obcaecati quaerat quas quia quisquam ratione repellat
              rerum sunt suscipit ullam vitae. Consequuntur eius fugit itaque pariatur, saepe sequi unde. At?
          </div>
          <div>A alias, commodi dicta doloremque explicabo labore maxime reprehenderit voluptas. A autem dicta eligendi
              fugit id illo nesciunt, nihil odit possimus provident quae quisquam reprehenderit, repudiandae sint
              tempore vero voluptatem.
          </div>
          <div>Aliquam at dolore dolores fuga fugiat illo pariatur placeat, reprehenderit saepe temporibus! Animi autem
              commodi cum deleniti, dolorem doloremque dolorum ducimus earum harum labore libero neque officia quam quia
              unde.
          </div>
          <div>Adipisci alias atque beatae consequuntur dolores eius enim esse excepturi explicabo fugiat illum
              inventore iste libero molestias natus odit optio pariatur perferendis, placeat provident quos recusandae
              sed tempora ullam veniam.
          </div>
          <div>A ad beatae eligendi in iste, labore libero maxime minus molestias nulla obcaecati pariatur perspiciatis
              provident quas qui repellat repudiandae sint tempora totam voluptatum? Commodi iure praesentium
              repudiandae soluta sunt?
          </div>
          <div>Consequatur enim eum in maxime odio praesentium ratione sed! Animi, delectus quod. Accusantium beatae
              culpa dignissimos, doloribus ex, ipsam molestias obcaecati officiis perspiciatis quae recusandae sunt
              tenetur vel, vero voluptate.
          </div>
          <div>Accusantium cupiditate distinctio dolorem dolores earum eos est, hic ipsum magni modi nesciunt pariatur
              possimus quas quasi quis quod rem repellat repudiandae sit sunt temporibus unde velit, veritatis, vero
              vitae!
          </div>
          <div>Accusamus alias aliquid delectus distinctio eaque eum eveniet exercitationem fuga fugiat id, illo impedit
              ipsa labore magnam minus modi neque officiis omnis quam quia quod quos, repudiandae rerum sed totam!
          </div>
          <div>Maiores sed, voluptate. A adipisci, aliquid amet animi consequatur cupiditate deleniti doloribus dolorum
              eum explicabo facilis fugiat harum impedit in iusto laudantium nobis, odit quaerat quam quasi quisquam
              reprehenderit sequi.
          </div>
          <div>Ad atque delectus esse facere facilis impedit, magnam maiores modi perferendis quae recusandae sint sit
              voluptate! Deleniti ea enim expedita minus molestiae nostrum, omnis quibusdam ratione. Accusamus alias
              libero suscipit?
          </div>
          <div>Accusantium aspernatur assumenda autem beatae cupiditate et eum id labore laborum minima molestiae natus
              nobis pariatur, provident quam quibusdam, quidem sint sit totam voluptatibus! In numquam, tempora.
              Aperiam, quas sapiente?
          </div>
          <div>Accusamus asperiores atque delectus doloremque eius impedit magnam saepe? Accusamus architecto assumenda
              ea, facere fuga iusto officiis porro provident. Adipisci ea, in perspiciatis unde voluptatem voluptatum!
              Aliquam magni saepe totam.
          </div>
          <div>Autem dolor earum ex fugit impedit ipsam minus, porro temporibus vitae. Accusantium delectus perferendis
              provident ratione. Aliquid architecto culpa cumque cupiditate error explicabo facere illo nulla obcaecati
              quisquam, sapiente tempora.
          </div>
          <div>Aliquid atque commodi consequatur cupiditate dignissimos dolores eos, ex facilis fugit laborum magni,
              minus officia quae ratione repellat suscipit ullam voluptatem. Aperiam delectus eaque magni optio quis
              sunt vitae voluptate.
          </div>
          <div>Accusantium asperiores culpa dignissimos dolorum eaque est ex facere fugit ipsa iure odio pariatur porro,
              provident quidem quod quos ratione reprehenderit tempore vel voluptatem? Autem cumque harum nesciunt optio
              temporibus!
          </div>
          <div>Aspernatur assumenda, atque aut consequuntur dolores eaque error, illum in quidem quisquam quod voluptate
              voluptates! Eos laboriosam non numquam repudiandae veritatis vero! Asperiores doloribus ipsa nostrum
              numquam placeat quis rem?
          </div>
          <div>Deserunt esse minus molestias nemo quidem quos reiciendis repudiandae sint ut? Alias aperiam aut
              blanditiis consequatur culpa, dignissimos ducimus eveniet ipsum magnam maiores maxime necessitatibus nulla
              odio odit tempora voluptas!
          </div>
          <div>Aperiam cupiditate debitis deleniti dolore eveniet ipsum minus nisi nobis, quidem reiciendis repellat,
              velit. Ad alias doloremque harum, iure magni pariatur ratione reiciendis vero. A consequuntur enim
              necessitatibus possimus recusandae?
          </div>
          <div>Aliquam debitis dolores, est facilis fugiat illo laudantium maxime necessitatibus nostrum nulla, quas
              sequi ut vero. Beatae cumque deleniti dolorum explicabo maiores nam, optio perferendis quidem
              reprehenderit, suscipit totam voluptatum.
          </div>
          <div>Amet delectus doloremque eos illo ipsa quia, similique sit sunt! Commodi consequuntur eligendi facere,
              fuga fugit itaque nam, perspiciatis quam quas quos repellendus sit temporibus voluptatum. Exercitationem
              laborum laudantium recusandae.
          </div>
          <div>Amet dolor eaque expedita repudiandae sint! Distinctio et laboriosam praesentium sunt? Amet aperiam
              consequatur, corporis culpa doloremque dolores ex, ipsum iusto modi nesciunt nostrum obcaecati odit
              quisquam sapiente, sed sunt.
          </div>
          <div>Autem cupiditate minima modi officiis, optio, pariatur perspiciatis, quasi repudiandae sed tempora
              veritatis voluptatibus. Dolores ducimus fugit omnis quasi. Dignissimos ducimus in natus optio provident
              saepe similique tempore? Facere, fuga.
          </div>
          <div>Asperiores assumenda atque consequuntur corporis deleniti deserunt dolorem ducimus earum eligendi enim
              illo illum in mollitia nemo nisi nostrum, odio, odit optio placeat possimus provident quod reiciendis sit
              sunt vel?
          </div>
          <div>Beatae blanditiis, dolorem, explicabo fugiat iusto modi molestiae neque possimus quibusdam quisquam
              recusandae tenetur totam voluptas? Culpa doloremque eligendi eos error incidunt necessitatibus, provident
              quae quam qui reprehenderit. Corporis, tempore.
          </div>
          <div>Aut expedita iure molestias nobis saepe suscipit temporibus. Magnam, quae, unde. Accusamus at dolorem,
              doloremque exercitationem expedita id illum magni maiores mollitia optio perferendis quod rem repudiandae
              sapiente sint? Sed.
          </div>
          <div>Aliquam consequuntur doloremque id magnam molestiae natus perferendis sunt veniam! Consequuntur, quas
              repellat? Dolorum, iure nam? Accusamus, aut dolor dolores ipsum neque non, officiis, quaerat qui sequi sit
              ullam veritatis?
          </div>
          <div>A, accusantium aut autem delectus eum fugiat harum id impedit inventore ipsum neque obcaecati provident
              quas quis quo quod rerum vero? Deleniti fugit nam nostrum qui, sit tenetur voluptates. Ex.
          </div>
          <div>Assumenda beatae dicta dignissimos dolorum ea fugit ipsum modi nam non nostrum numquam odit officia
              possimus quidem, reprehenderit soluta suscipit veniam voluptatem. Animi enim, incidunt ipsum iure quis
              voluptatem. Cumque.
          </div>
      </div>
</body>
</html>